.triangle {
  display: inline-block;
  position: relative;
  background-color: orange;
  top: -3px;
}
.triangle:before,
.triangle:after {
  content: "";
  position: absolute;
  background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
  width: 5px;
  height: 5px;
  border-top-right-radius: 50%;
}
.triangle {
  transform: rotate(0) skewX(-30deg) scale(1, 0.866);

  &.rotate {
    transform: rotate(30deg) skewX(-30deg) scale(1, 0.866);
  }
}
.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0%, -100%);
}
.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(100%, 50%);
}
